import React, { useState, useEffect } from 'react';
import axios from "../../../../../../util/axios"
import { Card, Table, Space, Switch, Modal, message } from 'antd';
import "./index.css"
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
const Index = () => {
    const [list, setlist] = useState([]);
    //删除提示框
    function showDeleteConfirm() {
        return new Promise((res, rej) => {
            confirm({
                centered: true,
                closable: true,
                width: 600,
                title: '你确定要删除吗?',
                icon: <ExclamationCircleOutlined />,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    res()
                }
            });
        })
    }
    //获取数据的func
    const getList = async () => {
        let res = await axios.get('/order');
        setlist(res.data.data)
    }
    //请求数据的钩子
    useEffect(() => {
        getList()
    }, [])
    //删除func
    const delfunc = async (key) => {
        let result = await axios.get('/orderDel', { params: { id: key } })
        if (result.data.code === 200) {
            getList()
            message.success('删除成功');
        } else {
            message.success('删除失败');
        }
    }
    //删除
    const delItemList = (key) => {
        showDeleteConfirm().then((res) => {
            delfunc(key)
        })
    }
    //修改状态
    const changSwitch = async (state) => {

        message.success('修改状态成功');

    }
    const columns = [
        {
            title: '商品图片',
            key: 'id',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <img src={record.spimg} alt="" />
                </Space>
            ),
        },
        {
            title: '商品名称',
            key: 'id',
            dataIndex: 'name',
            align: "center",
        },
        {
            title: '评价内容',
            key: 'id',
            dataIndex: 'text',
            align: "center",
        },
        {
            title: '评价图片',
            key: 'id',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <img src={record.pjimg} alt="" />
                </Space>
            ),
        },
        {
            title: '显示状态',
            align: "center",
            key: 'id',
            render: (text, record) => (
                <Space size="middle">
                    <Switch onChange={() => { changSwitch(record.lls) }} defaultChecked={record.lls === 'true' ? true : false} />
                </Space>
            ),
        },
        {
            title: '操作',
            align: "center",
            key: 'id',
            render: (text, record) => (
                <Space size="middle">
                    <span className='delOrder' onClick={() => { delItemList(record.id) }}>删除</span>
                </Space>
            ),
        }
    ]
    return (
        <div className='evaluateOrder'>
            <div className="site-card-border-less-wrapper">
                <Card bordered={false}>
                    <Table columns={columns} dataSource={list} scroll={{ y: 540 }} rowKey="id" />
                </Card>
            </div>
        </div>
    );
}

export default Index;
